<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<link rel="stylesheet" type="text/css" href="index.css"/>
		<script type="text/javascript" src="js/jquery-1.12.4(1).js" ></script>
		<script type="text/javascript">
			$(function(){
				$(".list").on("mouseover","li",function(){
					$(this).children(".in_m").show();
				}).on("mouseout","li",function(){
					$(this).children(".in_m").hide();
				})
//				$(".list li").mouseover(function(){
//					$(this).children(".in_m").show();
//				}).mouseout(function(){
//					$(this).children(".in_m").hide();
//				});	
				
				$(".in_m").on("click",".in_m a",function(){
				var index=$(this).index();
				
				alert(index);
				
				var tex=$(this).parent().siblings("i").html();
				var con=`<div class="inner_from">
			              	<input type="text" id="t" value="${tex}"/> 
			 				<input type="button" value="提交" id="add"/>
			 				<a href="#">取消</a>
							
						</div>`;
						
				$(".inner_from").remove();
				
				if(index==0){
					
					$(this).parent().after(con);
				}else if(index==1){
					$(this).parents("li").remove();
				
				}
			  })
			  
			  $(".list").on("click","#add",function(){
			  	var value =$(this).prev().val();
//			  	alert(value);
				
			  	if($(this).parent().prev().find("li")[0]){
			  		var newList = `<li><span class="iconfont icon-tag"></span><i>${value}</i>
							<div class="in_m">
								<a href="#">修改</a>
								<a href="#">删除</a>
						</div>
						</li>`;
					$(this).parent().prev().append(newList);
			  	}else{
			  		
			  		$(this).parents("li").children("i").html(value);
			  	}
			  	
			  	$(this).parent().remove();
			  })
			  
			  
			  $(".list").on("click",".inner_from a",function(){
			  	$(this).parent().remove();
			  })
			  
			  
			  $(".add a").click(function(){
			  	var con=`<div class="inner_from">
			              	<input type="text" id="t" value="${tex}"/> 
			              	
			 				<input type="button" value="提交" id="add"/>
			 				<a href="#">取消</a>
							
						</div>`;
						
						$(".list").append(con);
			  })
			  
			  
			  $("#item_add").click(function(){
			  	var value =$(this).prev().val();
			  	alert(value);
			  	var newLis=`<li>
						<input type="checkbox" />value
						<div class="inner_btn">
							<button>更新</button>
							<button>删除</button>
						</div>
					</li>`;
					
				$(this).parent().prev().append(newLis);
				
			  })
			});
			
			
		</script>
	</head>
	<body>
		<div class="head">
			TODLIST
		</div>
		<div class="main">
			<div class="left_list">
				<div class="title">
					<span class="iconfont icon-liebiao">
						项目
					</span>
				</div>
				<div class="list">
					<ul>
						<li><span class="iconfont icon-tag"></span>默认
						
						</li>
						<li><span class="iconfont icon-tag"></span><i>跟人</i>
							<div class="in_m">
								<a href="#">修改</a>
								<a href="#">删除</a>
						</div>
						</li>
						<li><span class="iconfont icon-tag"></span><i>默认</i>
							<div class="in_m">
								<a href="#" >修改</a>
								<a href="#">删除</a>
						</div>
						</li>
					</ul>
					
				</div>
				<div class="add">
					<span class="iconfont icon-editor"></span>
					<a href="#">添加项目</a>
				</div>
			</div>
			<div class="rigth_item">
				<input type="text"  />
				<button class="tianjia" id="item_add">添加</button>
				<h3>未完成工</h3>
				<ul class="ul_t">
					
					
				</ul>
				<div class="tag"></div>
				<hr />
				<h3>已完成工</h3>
				<ul class="ul_t"></ul>
				<div class="tag">展无元素
				
				</div>
			</div>
		</div>
		
				
	</body>
</html>
